<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
    <!-- import JavaScript -->
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script src="../js/eui.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="addAge">年龄+1</button> <br/>
        <button @click="addSex">添加性别属性，默认男</button> <br/>
        <button @click="addFriendFirst">列表首位添加一个朋友</button> <br/>
        <button @click="updateFriendNameFirst">修改第一个朋友的名字为“张三”</button> <br/>
        <button @click="addHobby">添加一个爱好</button> <br/>
        <button @click="updateHobbyFirst">修改第一个爱好：开车</button> <br/>
        <button @click="filterHobbySmoke">过滤掉爱好中的抽烟</button> <br/>

        <h3>姓名:{{student.name}}</h3>
        <h3 v-if="student.sex">性别:{{student.sex}}</h3>
        <h3>年龄:{{student.age}}</h3>
        <h3>爱好</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{ h }}</li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{ f.name }}----{{ f.age }}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    /**
     * Vue监视数据的原理：
     *
     * 1.Vue监视data中所有层次的数据。
     * 2.如何检测对象中的数据？
     *      通过setter实现监视，且要在new Vue时就传入要检测的数据
     *          （1）对象后追加的属性，Vue默认不做响应式处理（student.sex='男'）
     *          （2）如需给后添加的属性做响应式，使用如下函数：
     *              Vue.set(target,propertyName/index,value)
     *              vm.$set(target,propertyName/index,value)
     * 3.如何检测数组中的数据？
     *      通过包装数组更新元素的方法实现，本质做了两件事：
     *          （1）调用原生对应的函数进行更新
     *          （2）重新解析模板，进而更新页面
     * 4.在Vue中修改数组中某个元素一定要使用如下函数：
     *      （1）push(),pop(),shift(),unshift(),splice(),sort(),reverse()
     *       (2)Vue.set()/vm.$set()
     * 特别注意：Vue.set()/vm.$set()不能给vm或其根数据对象（data）添加属性！！！
     * 数据劫持：将data中的数据遍历一遍，变成getter、setter的形式的行为。(修改数据+解析模板)
     */
    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'tom',
                age:18,
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {name:'Jerry',age:35},
                    {name:'Tony',age:40}
                ]
            }
        },
        methods:{
            addAge(){
                this.student.age = this.student.age+1;
            },
            addSex(){
                //参数：修改目标，修改属性，修改值
                //student.sex='男' //这种方式vue无法将其视为响应式
                //Vue.set(this.student,'sex','男');
                vm.$set(this.student,'sex','男');
            },
            addFriendFirst(){
                //数组倒序添加
                this.student.friends.unshift({name:'曲可欣',age:26});
                //
            },
            updateFriendNameFirst(){
                this.student.friends[0].name='张三';
            },
            addHobby(){
                this.student.hobby.push('打王者');
            },
            updateHobbyFirst(){
                //this.student.hobby.splice(0,1,'开车');
                //参数：修改目标，修改索引，修改值
                vm.$set(this.student.hobby,0,'开车');
            },
            filterHobbySmoke(){
                this.student.hobby = this.student.hobby.filter((h)=>{
                    return h !== '抽烟';
                })
            }
        }
    })
</script>
</html>